<template>
  <div class="use-array_every">
    <description title="useArrayEvery" info="检查数组中的每个元素是否通过测试。" :desc="details.desc" :param="details.param" :use="details.useDesc" />
    <p class="description-details">
      <span>数组：</span>
      <el-select style="width: 250px;" v-model="arrayVal">
        <el-option
        v-for="(item,index) in arrays"
        :key="index"
        :value="item.value"
        :label="item.value"></el-option>
      </el-select>
      <span style="margin-left: 50px;">条件：</span>
      <el-select style="width: 250px;" v-model="condition">
        <el-option
        v-for="(item,index) in conditions"
        :key="index"
        :label="item.label"
        :value="item.value"></el-option>
      </el-select>
      <span style="margin-left:20px">
        结果：{{ result }}
      </span>
      <el-button type="primary" style="margin-left: 20px;" @click="save">保存</el-button>
    </p>
  </div>
</template>
<script lang="ts" setup>
  import { useArrayEvery } from "@vueuse/core"
  import { ref } from 'vue'
  import description from "@/components/description/index.vue"
  import { ArrayConfig } from '../useArrayFilter/config.ts'
  import { UseArrayEnums } from '@/shared/enums/array'
  const details = ref();
  details.value = new ArrayConfig(UseArrayEnums.USE_ARRAY_EVERY).getConfig()
  const result = ref()
  const arrayVal = ref()
  const condition = ref()
  const arrays = ref([
    {
      id: 1,
      value: '1,2,3,4,5'
    },
    {
      id: 2,
      value: '0,2,4,6,8'
    }
  ])
  const conditions = ref([
    {
      value: 1,
      label: '元素都大于2'
    },
    {
      value: 2,
      label: '元素均除以2余0'
    }
  ])
  const save = () => {
    if (condition.value == 1) {
      return result.value = useArrayEvery(arrayVal.value.split(',').map(Number), (i: any) => i > 2)
    }
    if (condition.value == 2) {
      return result.value = useArrayEvery(arrayVal.value.split(',').map(Number), (i: any) => i % 2 ==0)
    }
  }
</script>
